@mateusabelli this is such a great and distinctive feature to have ❤️ Thanks for pursuing this PR. I really feel that we could progressively keep working on enhancing this feature.

The delete button does not use the predefined Button component

This is a minor brush we can give at a later time.

After deleting the current image selected, it remains displaying on the screen

I'm thinking something along these lines. We're keeping state for the current image, what if we compare those string on the click handler and if they match, we reset the current image with the placeholder one?

After reaching 10 images on the history panel, it won't start overwriting older ones

Same here, I would abstract the entire logic into a custom hook and just pass the string. The hook internally should determine what to do with the stored strings and the incoming one. If the max number is reached, it should remove the first item and introduce the incoming one.

function addImageToArray(images, newImage) {
 // Maybe extract this outside of the function
  const MAX_LIMIT = 10;

  // Check if the array has reached the maximum limit
  if (images.length === MAX_LIMIT) {
    // Remove the first image source
    images.shift();
  }

  // Add the new image source to the end of the array
  images.push(newImage);

  return images;
}

After selecting an image from history, new pastes will be pasted but not displayed automatically

This one is a tricky one. I think the problem might be with the useEffect. Either try to separate it into two different effects or I would refactor the component to always grab the src from the state. This would also mean that the pasteImage function should only return the string and then the component should set state and update the ref.

if (imageRef.current){
  currentImage.onclick = async () => {
    // Prolly we should rename that function because it no longer makes sense to pass the ref
    const imageSrc = await pasteImage();
    setCurrentImage(imageSrc);
    imageRef.current.src = imageSrc;
  }
}

Hopefully that makes sense, let me know if you need to talk more about this.

Is this PR ready for review? I tested the latest preview built and I still see opportunity for some improvements. Here are a couple of observations:

• Order of items: I would expect that the last item in the panel is the latest image pasted from my clipboard. Currently, the first item of the array is the last image pasted. In my opinion, it is a bit confusing.
• Maxed items doesn't do anything: I would expect that if I reached the maximum number of items in the stored history, the panel would start replacing removing the oldest items to leave space for the recent items to continually keep storing items.
• Pasting an image that is already there: This might be challenging but if I paste an image that has already been pasted, it creates a duplicate in the array. Are the blobs strings different? Not sure but I think this might be a challenge. If the blobs are always unique we might not be able to control this
• Storing: We might have to address this in a separate story but the items aren't kept in local storage. This would be a nice feature.

Let me know what challenges you are facing. Also, if you want me to jump in and help with development, please let me know and push your latest changes to this PR. @mateusabelli